<template>
    <div>
        <canvas ref="canvasRef" width="600" height="600"></canvas>
        <div>键盘 <span>上下左右 </span>   控制</div>
    </div>
</template>
    
<script setup lang='ts'>
import { ref, onMounted, onUnmounted } from 'vue'
import { SnakeGame } from './Games/Snake'
const canvasRef = ref<HTMLCanvasElement>()
const game = ref<SnakeGame>()
onMounted(() => {
    if (!canvasRef.value) return;
    game.value = new SnakeGame(canvasRef.value)
    game.value.start()
})

onUnmounted(() => {
    game.value?.end();
})
</script>
    
<style>
span{
    color: red;
}</style>